let vue = new Vue({
    el:'#register',
    delimiters: ['${','}'],
    data:{
        // v-model
        username: '',
        password: '',
        smscode: '',
        imgcode: '',
        phone: '',

        // v-show
        error_username: false,
        error_password: false,
        error_smscode: false,
        error_imgcode: false,
        error_phone: false,

        // v-message
        error_username_msg: '用户名以字母开头，并且长度为6-10位',
        error_password_msg: '请输入6-18位的字符',
        error_phone_msg: '请输入正确的手机号',
        error_smscode_msg: '验证码错误',
        error_imgcode_msg: '验证码错误',

        // 图片验证码相关变量
        imgcode_url: '',
        uuid: '',

        // 短信验证码相关变量
        smscode_btn: '获取短信验证码',
        send_flag: false,
    }, mounted(){
            this.generate_img_code();
            },
    methods:{

        send_smscode: function () {
            // 获取短信验证码功能

            // 1.判断当前发送短信验证码状态
            if (this.send_flag){
                return;
            }
            this.send_flag = true;

            //2. 手机号和图片验证码校验
            // this.check_phone();
            // this.check_imgcode();

            if (this.error_phone || this.error_imgcode){
                this.send_flag = true
                return;
            }

            //3.发送短信验证码
            var url = '/smscodes/'+ this.phone+'/?imgcode='+this.imgcode+'&uuid='+this.uuid
            axios.get(url, {
                responseType: 'json'
            }).then(response=>{
                let code = response.data.code;
                if (code == 200){// 短信验证码正常发送
                    let num = 60;
                    let id = setInterval(()=>{
                        if(num == 1){
                            clearInterval();
                            this.send_flag = false;
                            this.smscode_btn = '获取短信验证码';
                        }else {
                            num -= 1;
                            this.smscode_btn = '倒计时：'+num+'秒';
                        }
                    }, 1000, 60)
                }else if(code == '4001' || code == '4002' || code == '4003' || code == '5001' || code=='4004'){// 短信验证码发送错误

                    this.error_smscode = true;
                    this.error_smscode_msg = response.data.errormsg;

                    this.send_flag = false;
                    this.generate_img_code();
                }
            }).catch(error=>{
                console.log(error.response)
            })
        },

        check_smscode: function () {
            // 1.短信验证码格式校验
            let reg = /^\d{6}$/;
            if(!reg.test(this.smscode)){
                this.error_smscode = true;
            }else {
                this.error_smscode = false;
            }

            // 2.短信验证码有效性校验
            if (!this.error_smscode){
                axios.get('/check_smscode/'+this.phone+'/?smscode='+this.smscode, {
                    responseType: 'json'
                }).then(response=>{
                    let code = response.data.code;
                    if (code != '200'){
                        this.error_smscode_msg = response.data.errormsg;
                        this.error_smscode = true;
                    }else{
                        this.error_smscode = false;
                    }
                })
            }
        },


        // 图片验证码非空校验
        check_imgcode: function () {
            if (this.imgcode == ""){
                this.error_imgcode_msg = '验证码不可为空!!';
                this.error_imgcode = true;
            }else {
                axios.get('/check_imgcode/'+this.uuid+'/',{
                        responseType:'json'
                    }).then(response=>{
                        if(response.data.imgcode == this.imgcode){
                            this.error_imgcode = false;
                        }else {
                            this.error_imgcode_msg = '您的验证码输入有误!!';
                            this.error_imgcode = true;
                        }
                    }).catch(error=>{
                    console.log(error.response);
                });
            }
        },
        // 图片验证码展示功能
        generate_img_code: function () {
            // 生成uuid
            this.uuid = generateUUID();
            // 生成请求地址
            this.imgcode_url = '/imgcodes/'+this.uuid+'/';
        },

        // 校验用户名(只能输入6-10位的字符)
        check_uname: function() {

            // 格式校验
            let reg = /^[a-zA-Z]\w{5,9}$/;
            if(!reg.test(this.username)){
                this.error_username = true;
            }else{
                this.error_username = false;
            }
            // 重复校验
            if(!this.error_username){
                axios.get('/usernames/'+this.username+'/count/',{
                    responseType:'json'
                }).then(response=>{
                    if(response.data.count==1){
                        this.error_username_msg = '当前用户名已被注册';
                        this.error_username = true;
                    }else{
                        this.error_username = false;
                    }
                }).catch(error=>{
                    console.log(error.response);
                });
                // console.log('done');
            }
            
        },
        // 校验密码
        check_pwd: function () {
            // console.log(123)
            let reg = /^\w{6,18}$/;
            if(!reg.test(this.password)){
                this.error_password = true;
            }else{
                this.error_password = false;
            }
        },
        // 校验手机号
        check_phone: function () {
            // 格式校验
            let reg = /^1[3-9]\d{9}$/;
            if(!reg.test(this.phone)){
                this.error_phone = true;
            }else{
                this.error_phone = false;
            }

            //手机号重复校验
            if(!this.error_phone){
                axios.get('/phones/'+this.phone+'/count/',{
                    responseType:'json'
                }).then(response=>{
                    if(response.data.count==1){
                        this.error_phone_msg = '当前手机号已被注册';
                        this.error_phone = true;
                    }else{
                        this.error_phone = false;
                    }
                }).catch(error=>{
                    console.log(error.response);
                });
            }
        },
        //监听表单提交事件
        reg_sub:function () {
            this.check_uname();
            this.check_phone();
            this.check_pwd();
            // this.check_smscode();

            if(this.error_phone||this.error_username||this.error_password||this.error_imgcode||this.error_smscode){
                // 阻止表单的提交
                window.event.returnValue = false;
            }
        }
    }
});